<html>
  <head></head>
  <body>
    <div id="game"></div>
    <script src="https://rawgithub.com/craftyjs/Crafty/release/dist/crafty-min.js"></script>
    <script>
      Crafty.init(600, 600, document.getElementById('game'));
      Crafty.background('rgb(127,127,127)');

      var renderMethod = 'DOM';
      var green = Crafty.e('2D, '+renderMethod+', Color')
        .attr({ x: 200, y: 200, w: 100, h: 100})
        .color('green');
      var blue = Crafty.e('2D, '+renderMethod+', Color')
        .attr({x: -200, y: -200, w: 100, h: 100})
        .color('blue');

      var player = Crafty.e('2D, '+renderMethod+', Color, Fourway')
                          .attr({x: 0, y: 0, w: 25, h: 125})
                          .color('gray')
                          .fourway();

      Crafty.viewport.clampToEntities = false;
      
      Crafty.viewport.scale(0.5);
      Crafty.one("CameraAnimationDone", function() {
        Crafty.one("CameraAnimationDone", function() {
          Crafty.one("CameraAnimationDone", function() {
            Crafty.one("CameraAnimationDone", function() {
              Crafty.one("CameraAnimationDone", function() {
                player.color('red');
                Crafty.viewport.scale(0.5);
                Crafty.viewport.follow(player, -100, -100);
              });
              Crafty.viewport.zoom(2, player.x + player.w/2 + 100, player.y + player.h/2 + 100, 3000);
            });
            Crafty.viewport.centerOn(player, 3000);
          });
          Crafty.viewport.zoom(0.5, green.x + green.w/2, green.y + green.h/2, 3000);
        });
        Crafty.viewport.zoom(2, green.x + green.w/2, green.y + green.h/2, 3000);
      });
      Crafty.viewport.centerOn(blue, 0);
    </script>
  </body>
</html>
